<template>
	<view class="qiun-columns">
		<view class="top">
			<view class="left">
				<view class="title">{{group_name}}</view>
				<view class="over-time">测试时间：{{create_time.substring(0,10)}}</view>
				<!-- <view class="length">测试时长：6分钟</view> -->
			</view>
		</view>
		<view class="bg">
			<view class="qiun-charts" v-if="chartData.categories.length>0">
				<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts"></canvas>
			</view>
			<view class="list" v-if="datas.data">
				<view class="item" v-for="(item,index) in datas.data" :key="index" @click="changeFunc(index)">
					<view class="item-title">
						<view class="item-name">{{item.dimension}}</view>
						<view class="item-right" :class="{'item-active': item.isShow}">
							<view>{{item.rate}}</view>
							<i class="iconfont iconjiantou"></i>
						</view>
					</view>
					<view v-if="item.isShow" class="item-cont">{{item.content}}</view>
				</view>
			</view>
		</view>
		<view class="course" v-if="datas.course!=''">
			<view class="title">解决方案</view>
			<view class="course-image">
				<view class="course-image-item" v-for="(item,index) in datas.course" :key="index">
					<image :src="item.picture"></image>
					<view class="text">
						<view class="course-title">{{item.course}}</view>
						<view class="course-text">{{item.course_introduction}}</view>
					</view>
				</view>
			</view>
			<view>

			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaRadar = null;
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				chartData: {
					categories: [],
					series: [{
						name: '成交量1',
						data: []
					}]
				},
				group_unid: '',
				datas: '',
				group_name: '',
				create_time: '',
				respondent_id: '',
				zoom_id: ''
			}
		},
		onLoad(e) {
			this.group_unid = e.group_unid;
			this.phone = e.phone;
			this.respondent_id = e.respondent_id;
			this.zoom_id = e.zoom_id;
			var data = {
				phone: uni.getStorageSync('phone'),
				group_id: this.group_unid,
				respondent_id: this.respondent_id
			}
			if (this.zoom_id) {
				data.zoom_id = this.zoom_id
			}
			this.$qstapi.apiPost('report/create', data).then(res => {
				if (res.data.code == 200) {
					this.datas = res.data.data;
					this.group_name = this.datas.student.group.group_name;
					this.create_time = this.datas.student.create_time;
					var categories = [];
					var seriesdata = [];
					if(this.datas.data){
						this.datas.data.forEach((item, key) => {
							this.datas.data[key]['isShow'] = false;
							categories.push(item.dimension);
							seriesdata.push(item.score);
						});
					}
					this.chartData.categories = categories;
					this.chartData.series[0]['data'] = seriesdata;
					this.show();
				} else {
					uni.showToast({
						title: '暂时无法查看该报告',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					},600)
				}
			})
		},
		methods: {
			show() {
				_self = this;
				this.cWidth = uni.upx2px(750);
				this.cHeight = uni.upx2px(500);
				canvaRadar = new uCharts({
					$this: this,
					canvasId: 'canvasRadar',
					type: 'radar',
					fontSize: 11,
					legend: {
						show: false
					},
					background: '#FFFFFF',
					pixelRatio: 1,
					animation: true,
					dataLabel: true,
					categories: this.chartData.categories,
					series: this.chartData.series,
					width: this.cWidth,
					height: this.cHeight,
					extra: {
						radar: {
							max: 100 //雷达数值的最大值
						}
					}
				});
			},
			changeFunc(index) {
				this.datas.data[index]['isShow'] = !this.datas.data[index]['isShow'];
				this.$forceUpdate();
			}
		}
	}
</script>

<style lang="scss">
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-columns {
		padding-bottom: 100upx;
	}

	.top {
		width: 700upx;
		margin: auto;
		display: flex;

		.title {
			font-weight: Medium;
			font-size: 36upx;
			margin-top: 20upx;
		}

		.over-time,
		.length {
			font-size: 28upx;
			margin-bottom: 20upx;
		}
	}

	.qiun-charts {
		width: 700upx;
		margin: auto;
		height: 500upx;
		border-radius: 20upx;
	}
	.bg {
		padding-top: 40upx;
		margin: 0 20upx;
		border-radius: 20upx;
		background-color: #EFEFEF;
	}
	.charts {
		width: 100%;
		height: 500upx;
	}


	.list {
		margin: 20upx auto;
		border-radius: 20upx;
		padding: 30upx;
		width: calc(100% - 110upx);
	}

	.item-title {
		padding: 16upx 0;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.item-name {
		width: 75%;
		word-break: break-word;
	}

	.item-active i {
		transform: rotate(90deg);
	}

	.item-right {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.course {
		width: 700upx;
		margin: auto;
		background-color: #EFEFEF;
		border-radius: 20upx;

		.title {
			width: 100%;
			font-size: 32upx;
			text-align: center;
			height: 80upx;
			line-height: 80upx;
			font-weight: 500;
		}

		.course-image {
			width: 640upx;
			margin: auto;
			display: flex;
			justify-content: space-between;

			.course-image-item {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				margin-top: 20upx;

				image {
					width: 200upx;
					height: 150upx;
				}

				.text {
					height: 200upx;
					width: 420upx;
					margin-left: 20upx;
					display: flex;
					flex-direction: column;

					.course-title {
						font-size: 28upx;
						font-weight: 500;
						color: #000000;
					}

					.course-text {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						font-size: 18upx;
					}


				}
			}
		}
	}
</style>
